<template>
	<view>
		<view class="inv-top-menu-bar">
			<view class="top-menu">
				<view class="top-menu-list">
					<text class="t-btn" :class="params.type == 0 ? 'active' : ''" @click="changeTab(0)">
						发布中
					</text>
					<text class="t-btn" :class="params.type == 1 ? 'active' : ''" @click="changeTab(1)">
						审核中
					</text>
					<text class="t-btn" :class="params.type == 2 ? 'active' : ''" @click="changeTab(2)">
						已下线
					</text>
				</view>
			</view>
		</view>
		<view class="form_split_10"></view>
		<u-empty image="search" description="没有找到对应的数据" style="background-color:#fff" v-if="show_empty === true" />
		<view>
			<view class="box_wrapper">
				<view v-for="(item, index) in dataset" :key="index">
					<view class="list">
						<view class="tx1" v-if="item.resume_nolook > 0">
							<text v-if="item.resume_nolook==2"
								@click="handleClick('/job/id=',item.id)">{{ item.jobname }}</text>
							<text v-else>{{ item.jobname }}</text>
							<view class="right_txt" @click="handleJump('/company/CompanyManagementIndex?navIndex=0')">
								简历
								<text :class="item.resume_nolook > 0 ? 'not' : ''">
									{{ item.resume_nolook }}
								</text>
								/{{ item.resume_all }}
							</view>
						</view>
						<view class="tx1" v-else>
							{{ item.jobname }}
							<view class="right_txt" @click="handleJump('/company/ResumeManagement/ReceivedResume')">
								简历
								<text :class="item.resume_nolook > 0 ? 'not' : ''">
									{{ item.resume_nolook }}
								</text>
								/{{ item.resume_all }}
							</view>
						</view>
						<view class="tx2">
							<view class="ico apply">被投递{{ item.resume_all }}次</view>
							<view class="ico see">浏览{{ item.click }}次</view>
							<view class="ico time">{{ item.refreshtime }}更新</view>
							<view class="mark m1" v-if="item.job_status == 1">
								{{ item.job_status_cn }}
							</view>
							<view class="mark m0" v-if="item.job_status == 0">
								{{ item.job_status_cn }}
							</view>
							<view class="mark m2" v-if="item.job_status == 2">
								{{ item.job_status_cn }}
							</view>
							<view class="clear"></view>
						</view>
						<view class="tag"
							v-if=" item.job_status == 1 && (item.stick == 1 || item.emergency == 1 || item.auto_refresh == 1) ">
							<view class="mark m1" v-if="item.stick == 1">已置顶</view>
							<view class="mark m2" v-if="item.emergency == 1">已急聘</view>
							<view class="mark m3" v-if="item.auto_refresh == 1">智能刷新</view>
							<view class="clear"></view>
						</view>
						<view class="tx4"
							v-if=" item.is_display == 1 && item.job_status == 2 &&  item.audit_reason != '' ">
							说明：{{ item.audit_reason }}，请修改
						</view>
						<view class="tx3" v-if="params.type == 0">
							<view class="list_btn orange"
								v-if=" item.stick == 0 || item.emergency == 0 ||  item.auto_refresh == 0 "
								@click="handlerShowIncrement(item)">
								推广
							</view>
							<view class="list_btn" @click="openDisplayModal(item, index)">
								关闭
							</view>
							<view class="list_btn" @click="handleClick('/company/EditJob?id=',item.id)">
								修改
							</view>
							<view class="list_btn" @click="openRefreshModal(item)">刷新</view>
							<view class="clear"></view>
						</view>

						<view class="tx3" v-if="params.type == 1">
							<view class="list_btn" v-if="params.type == 1 || params.type == 2"
								@click="openDelModal(item, index)">
								删除
							</view>
							<view class="list_btn" @click="handleClick('/company/EditJob?id=',item.id)">
								修改
							</view>
							<view class="clear"></view>
						</view>

						<view class="tx3" v-if="params.type == 2">
							<view class="list_btn" v-if="params.type == 1 || params.type == 2"
								@click="openDelModal(item, index)">
								删除
							</view>
							<view class="list_btn" v-if="item.is_display == 1"
								@click="handleClick('/company/EditJob?id=',item.id)">
								修改
							</view>
							<view class="list_btn" v-if="item.is_display == 0" @click="openDisplayModal(item, index)">
								恢复
							</view>
							<view class="clear"></view>
						</view>

					</view>
					<view class="form_split_10"></view>
				</view>
			</view>
			<u-loadmore class="u-loadmore" v-if="dataset.length > params.pagesize" :status="finished_status" />
		</view>
		<view class="btn_row">
			<view class="btn_wrapper">
				<u-button type="primary" shape="circle" @click="handlerJobadd">
					发布职位
				</u-button>
			</view>
		</view>
		<u-action-sheet v-model="showIncrement" :list="options_increment" cancel-text="取消" close-on-click-action
			@close="showIncrement = false" @click="confirmIncrement" />
		<!-- 免费刷新次数已用完 再次刷新需要支付积分 -->
		<u-modal v-model="showRefreshJobDirectService" title="刷新职位" show-cancel-button confirm-text="立即支付"
			@confirm="handlerRefreshDirectService"> <!-- <view class="addJobTips">
				今日免费刷新职位次数已用完,请联系您的专属客服充值或兑换积分
			</view> -->
			<view class="dialog_tip_wrapper slot-content">
				<view class="tx1" v-if="refreshJobDirectServiceInfo.use_type == 'points'">
					今日免费刷新职位次数已用完，本次刷新需要支付
					<text class="red">{{ refreshJobDirectServiceInfo.need_points }}</text> {{ points_byname }}。
				</view>
				<view class="tx1" v-if="refreshJobDirectServiceInfo.use_type == 'money'">
					今日免费刷新职位次数已用完，本次刷新需要支付
					<text class="red">{{ refreshJobDirectServiceInfo.need_expense }}</text> 元。
				</view>
				<view class="tx2" v-if="parseInt(refreshJobDirectServiceInfo.discount) > 0">
					购买智能刷新低至<text class="red">{{ refreshJobDirectServiceInfo.discount }}</text>折，
					<view
						@click="handleClick('/service/company/buyIncrement?type=job_refresh&jobid=',refreshJobDirectServiceInfo.jobid)"
						class="blue">立即了解</view>
				</view>
			</view>
		</u-modal>
		<u-popup v-model="showPayment" closeable mode="bottom">
			<PopupPayment :amount="refreshJobDirectServiceInfo.need_expense" @handlerSubmit="handlerSubmitRefreshJob">
			</PopupPayment>
		</u-popup>
		<!-- 刷新 -->
		<u-modal v-model="refreshModal" title="系统提示" content="确定刷新该职位吗" :show-cancel-button="true"
			@confirm="handlerRefresh"></u-modal>
		<!-- 关闭职位 -->
		<u-modal v-model="closeModal" title="系统提示" :show-cancel-button="true" :content="closeTipText"
			@confirm="handlerDisplay"></u-modal>
		<!-- 删除 -->
		<u-modal v-model="delModal" title="系统提示" :show-cancel-button="true" content="确定删除该职位吗?" @confirm="handlerDel">
		</u-modal>
		<u-toast ref="uToast" />
		<!-- 发布职位提示框 -->
		<CustomerModal ref="CustomerModal"></CustomerModal>
		<u-toast ref="uToast" />
	</view>
</template>

<script>
	import {
		isWeiXin
	} from '@/utils/index'
	import PopupPayment from '@/components/service/PopupPayment'
	import http from '@/utils/http'
	import CustomerModal from '@/components/CustomerModal.vue'
	import api from '@/api'
	import {
		mapState
	} from 'vuex'
	export default {
		name: 'JobList',
		components: {
			PopupPayment,
			CustomerModal
		},
		data() {
			return {
				refreshModal: false,
				refreshData: {},
				showPayment: false,
				closeModal: false,
				closeTipText: '',
				close_params: {
					is_display: '',
					id: ''
				},
				delModal: false,
				delParams: {},
				showRefreshJobDirectService: false,
				refreshJobDirectServiceInfo: {},
				dataset: [],
				finished_status: 'loadmore',
				show_empty: false,
				params: {
					type: 0,
					page: 1,
					pagesize: 10
				},
				showIncrement: false,
				options_increment: [],
				increment_jobid: 0,
				enable_poster: 0
			}
		},
		created() {
			this.fetchData(true)
		},
		computed: {
			...mapState({
				points_byname: state => state.config.points_byname
			})
		},
		onReachBottom() {
			this.params.page++
			this.fetchData(false)
		},
		methods: {
			handleJump(path) {
				uni.navigateTo({
					url: path
				})
			},
			handleClick(path, id) {
				uni.navigateTo({
					url: path + id
				})
			},
			handleMakeCall() {
				uni.makePhoneCall({
					phoneNumber: this.customerInfo.mobile, //仅为示例
					complete: function(res) {}
				});
			},
			handlerJobadd() {
				http
					.get(api.company_check_jobadd_num, {})
					.then(res => {
						if (res.data.data.enable_addjob_num <= 0) {
							let addJobText = '您当前是' + res.data.data.setmeal_name +
								'，当前可发布职位数为0，建议您立即升级套餐或将暂时不招聘的职位设为关闭！'
							uni.showModal({
								title: '提示',
								content: addJobText,
								showCancel: true,
								cancelText: '取消',
								cancelColor: '#999999',
								confirmText: '升级套餐',
								confirmColor: '#2979ff',
								success: (res) => {
									if (res.confirm) {
										// 用户点击了确定按钮
										uni.navigateTo({
											url: '/company/Service/MySetmeal'
										})
									}
								},
							});
							return false
						} else {
							uni.navigateTo({
								url: '/company/AddJob'
							})
						}
					})
					.catch(() => {})
			},
			fetchData(init) {
				this.show_empty = false
				if (init === true) {
					this.params.page = 1
				} else {
					this.finished_status = 'loading'
				}
				http
					.get(api.company_joblist, this.params)
					.then(res => {
						if (init === true) {
							this.dataset = [...res.data.data.items]
						} else {
							this.dataset = this.dataset.concat(res.data.data.items)
						}
						this.enable_poster = res.data.data.enable_poster


						// 数据全部加载完成
						if (res.data.data.items.length < this.params.pagesize) {
							this.finished_status = 'nomore'
							if (init === false) {
								this.finished_status = 'nomore'
							} else if (res.data.data.items.length === 0) {
								this.show_empty = true
							}
						}
					})
					.catch(() => {})
			},
			changeTab(type) {
				this.params.type = type
				this.fetchData(true)
			},
			openDelModal(item, index) {
				this.delParams.id = item.id
				this.delParams.index = index
				this.delModal = true
			},
			handlerDel() {
				let {
					id,
					index
				} = this.delParams
				http
					.post(api.company_job_del, {
						id: id
					})
					.then(res => {
						this.$refs.uToast.show({
							title: res.data.message,
						})
						this.dataset.splice(index, 1)
					})
					.catch(() => {})
			},
			/**
			 * 刷新弹窗确认
			 * 
			 * */
			handlerRefresh() {
				http
					.post(api.company_job_refresh, {
						id: this.refreshData.id
					})
					.then(res => {
						if (res.data.data.done == 0) {
							this.refreshJobDirectServiceInfo = {
								use_type: res.data.data.use_type,
								need_points: res.data.data.need_points,
								need_expense: res.data.data.need_expense,
								discount: res.data.data.discount,
								jobid: this.refreshData.id,
								btnCn: res.data.data.use_type === 'points' ? '立即兑换' : '立即支付'
							}
							// #ifdef MP-WEIXIN
							this.showRefreshJobDirectService = true
							// #endif
							// #ifdef MP-TOUTIAO
							this.$nextTick(() => {
								this.$refs.CustomerModal.getCustomer()
							})
							// #endif
							return false
						} else if (res.data.data.done == 1) {
							this.refreshData.refreshtime = '刚刚'
							this.$refs.uToast.show({
								title: res.data.message,
							})
						}
					})
					.catch(() => {})
			},
			/**
			 * 刷新弹窗开启
			 * @item (Object) 当前刷新职位数据
			 * */
			openRefreshModal(item) {
				this.refreshModal = true
				this.refreshData = item
			},
			openDisplayModal(item, index) {
				this.close_params.is_display = item.is_display === 1 ? 0 : 1
				this.close_params.id = item.id
				this.close_params.audit = item.audit
				this.close_params.index = index
				let is_display_text = this.close_params.is_display === 1 ? '恢复' : '关闭'
				this.closeModal = true
				this.closeTipText = '确定' + is_display_text + '该职位吗？'
			},
			handlerDisplay() {
				http
					.post(api.company_job_set_display, this.close_params)
					.then(res => {
						let {
							is_display,
							audit,
							index
						} = this.close_params
						if (is_display === 0 || (is_display === 1 && audit !== 2)) {
							this.dataset.splice(index, 1)
						}
						this.$refs.uToast.show({
							title: res.data.message,
						})
						if (this.dataset.length == 0) {
							this.show_empty = true
						}
					})
					.catch(() => {})

			},
			handlerShowIncrement(item) {
				this.options_increment = [{
						text: '职位置顶',
						value: 'jobstick',
						disabled: false
					},
					{
						text: '职位紧急',
						value: 'emergency',
						disabled: false
					},
					{
						text: '智能刷新',
						value: 'job_refresh',
						disabled: false
					}
				]
				if (this.enable_poster == 1) {
					this.options_increment.push({
						name: '微海报',
						value: 'microposte',
						disabled: false
					})
				}
				if (item.stick === 1) {
					this.options_increment[0].disabled = true
				}
				if (item.emergency === 1) {
					this.options_increment[1].disabled = true
				}
				if (item.auto_refresh === 1) {
					this.options_increment[2].disabled = true
				}
				this.showIncrement = true
				this.increment_jobid = item.id
			},
			confirmIncrement(index) {
				let action = this.options_increment[index]
				if (action.value === 'microposte') {
					uni.navigateTo({
						url: '/member/company/microposte?jobid=' + this.increment_jobid
					})
				} else {
					// #ifdef MP-TOUTIAO
					this.$nextTick(() => {
						this.$refs.CustomerModal.getCustomer()
					})
					// #endif
					// #ifdef MP-WEIXIN
					uni.navigateTo({
						url: '/service/company/buyIncrement?type=' + action.value
					})
					// #endif
				}
			},
			/**
			 * 使用积分刷新职位 确认按钮
			 * */
			handlerRefreshDirectService() {
				let _this = this
				if (_this.refreshJobDirectServiceInfo.use_type === 'points') {
					_this.handlerSubmitRefreshJob('points')
				} else {
					_this.showPayment = true
				}
			},
			/**
			 * 刷新职位函数 （如果有积分使用积分支付，没有积分需要付款购买）
			 *  @payment (String)支付
			 * */
			handlerSubmitRefreshJob(payment) {
				uni.showLoading({
					title: '加载中'
				})
				let pay_data = {
						service_type: 'single_job_refresh',
						deduct_points: this.refreshJobDirectServiceInfo.use_type === 'points' ?
							this.refreshJobDirectServiceInfo.need_points : 0,
						payment,
						jobid: this.refreshJobDirectServiceInfo.jobid,
						return_url: '/company/jobList'
					},
					_this = this
				uni.login({
					provider: 'weixin',
					success: function(loginRes) {
						pay_data.code = loginRes.code
						http.post(api.company_pay_direct_service, pay_data)
							.then(res => {
								if (res.data.code == 200) {
									console.log(res.data.data.pay_status, 'res.data.data.pay_status')
									if (res.data.data.pay_status === 1) {
										uni.hideLoading();
										_this.$refs.uToast.show({
											title: '支付成功',
										})
										_this.fetchData(true)
										return false
									} else {
										_this.handlerPay(res.data.data.parameter, payment)
									}
								}
							})
							.catch(() => {})
					}
				});
			},
			/**
			 * 付款函数
			 * 	
			 * */
			handlerPay(parameter, payment) {
				let parameters = parameter.jsApiParameters
				// 调起支付
				uni.requestPayment({
					provider: this.paymentType,
					timeStamp: parameters.timeStamp,
					signType: parameters.signType,
					paySign: parameters.paySign,
					package: parameters.package,
					nonceStr: parameters.nonceStr,
					appId: parameters.appId,
					success: res => {
						uni.hideLoading();
						_this.$refs.uToast.show({
							title: '支付成功',
						})
					},
					fail: err => {
						uni.hideLoading();
						uni.navigateTo({
							url: '/commonViews/service/OrderList'
						})
					}
				});
			}
		}
	}
</script>

<style lang="scss" scoped>
	.btn_row {
		.btn_wrapper {
			padding: 24rpx 54rpx;
			background-color: #ffffff;
			position: fixed;
			left: 0;
			right: 0;
			bottom: 0;
			z-index: 30;
		}

		position: relative;
		height: 136rpx;
	}

	.box_wrapper {
		.list {
			.tx4 {
				padding-bottom: 25rpx;
				font-size: 26rpx;
				color: #ff0000;
			}

			.tx3 {
				.list_btn {
					float: right;
					font-size: 24rpx;
					padding: 8rpx 36rpx;
					background-color: #fff;
					border: 2rpx solid #e2e2e2;
					margin-left: 24rpx;
					border-radius: 52rpx;

					&.orange {
						border-color: #ff5d24;
						color: #ff5d24;
					}
				}

				padding: 24rpx 0;
				text-align: right;
				position: relative;

				&::after {
					position: absolute;
					box-sizing: border-box;
					content: " ";
					pointer-events: none;
					right: 0;
					top: 0;
					left: 0;
					border-bottom: 2rpx solid #ebebeb;
					-webkit-transform: scaleY(0.5);
					transform: scaleY(0.5);
					z-index: 10;
				}
			}

			.tag {
				.mark {
					float: left;
					font-size: 22rpx;
					padding: 6rpx 16rpx;
					border-radius: 6rpx;

					&.m1 {
						background-color: #fafafa;
						color: #ff6600;
					}

					&.m2 {
						background-color: #fafafa;
						color: #ff4d3f;
					}

					&.m3 {
						background-color: #fafafa;
						color: #5199ff;
					}

					&:not(:first-child) {
						margin-left: 10rpx;
					}
				}

				padding-bottom: 30rpx;
			}

			.tx2 {
				.mark {
					position: absolute;
					right: 0;
					top: 50%;
					transform: translate(0, -50%);
					font-size: 22rpx;
					padding: 6rpx 16rpx;
					border-radius: 6rpx;

					&.m1 {
						background-color: #f4f9ff;
						color: #1787fb;
					}

					&.m0 {
						background-color: #fffbf8;
						color: #ff7200;
					}

					&.m2 {
						background-color: #fff5f5;
						color: #ff0000;
					}
				}

				.ico {
					&.time {
						background-image: url($ImgUrl + "com_man_i3.png");
						background-repeat: no-repeat;
						background-position: 0 center;
						background-size: 21rpx;
						padding-right: 0;
					}

					&.see {
						background-image: url($ImgUrl + "com_man_ic2.png");
						background-repeat: no-repeat;
						background-position: 0 center;
						background-size: 26rpx 20rpx;
					}

					&.apply {
						background-image: url($ImgUrl + "com_man_ic1.png");
						background-repeat: no-repeat;
						background-position: 0 center;
						background-size: 22rpx 20rpx;
					}

					float: left;
					padding: 0 30rpx 0 34rpx;
					font-size: 24rpx;
					color: #666666;
				}

				position: relative;
				padding: 24rpx 6rpx;
			}

			.tx1 {
				.right_txt {
					.not {
						color: #ff0000;
					}

					position: absolute;
					right: 0;
					top: 43rpx;
					font-size: 24rpx;
					color: #333333;
					padding-right: 30rpx;
				}

				&::after {
					position: absolute;
					right: 10rpx;
					top: 54rpx;
					width: 12rpx;
					height: 12rpx;
					border-top: 2rpx solid #999999;
					border-right: 2rpx solid #999999;
					transform: rotate(45deg);
					content: " ";
				}

				font-size: 32rpx;
				font-weight: bold;
				color: #333333;
				padding: 39rpx 160rpx 6rpx 0;
				overflow: hidden;
				white-space: nowrap;
				text-overflow: ellipsis;
				position: relative;
			}

			width: 100%;
			background-color: #ffffff;
			padding: 0 30rpx;
		}

		width: 100%;
		//   padding-bottom: 68px;
	}

	.inv-top-menu-bar {
		background: #ffffff;

		.top-menu {
			overflow: hidden;
			overflow-x: scroll;
			-webkit-overflow-scrolling: touch;

			&::-webkit-scrollbar {
				display: none;
			}
		}

		.top-menu-list {
			white-space: nowrap;
			display: flex;

			.t-btn {
				position: relative;
				white-space: nowrap;
				display: inline-block;
				text-align: center;
				color: #666666;
				flex: 1;
				font-size: 30rpx;
				text-decoration: none;
				padding: 25rpx 0;
				-webkit-tap-highlight-color: rgba(0, 0, 0, 0.3);

				&::after {
					position: absolute;
					left: 50%;
					bottom: 6rpx;
					width: 32rpx;
					height: 6rpx;
					background-color: #1787fb;
					border-radius: 100%;
					transform: translate(-50%, 0);
				}

				&.active {
					color: #1787fb;

					&::after {
						content: " ";
					}
				}
			}
		}
	}

	.addJobTips {
		text-align: center;
		padding: 35rpx 25rpx;
		font-size: 30rpx;
		color: #606266;
		padding-top: 240rpx;
		background: url(../static/img/customer-dialog.png);
		background-size: 100% 152rpx;
		background-position: top center;
		background-repeat: no-repeat;

		.text1,
		.text2 {
			color: #1b1a1a;
			font-size: 36rpx;
		}

		.text2 {
			margin-bottom: 50rpx;
			margin-top: 20rpx;
		}

		.text3 {
			font-size: 46rpx;
			color: #ff6600;
			margin-bottom: 30rpx;
		}

		.text4 {
			color: #999999;
			font-size: 28rpx;
		}
	}
</style>